import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  TouchableOpacity,
  ScrollView,
  TouchableWithoutFeedback,
  Dimensions,
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useThemeColor } from '@/hooks/useThemeColor';

const SCREEN_WIDTH = Dimensions.get('window').width;

// 破冰话题类别
const ICEBREAKER_CATEGORIES = [
  {
    id: 'daily',
    title: '日常问候',
    icon: 'weather-sunny',
    color: '#4CAF50',
    examples: [
      '今天天气真好，您出门散步了吗？',
      '最近身体怎么样？有没有什么新鲜事？',
      '您今天的心情看起来不错，有什么好事分享吗？',
    ],
  },
  {
    id: 'health',
    title: '健康关怀',
    icon: 'heart-pulse',
    color: '#F44336',
    examples: [
      '最近睡眠质量如何？有什么好方法分享吗？',
      '您尝试过哪些保健活动？感觉效果怎么样？',
      '我最近开始每天早起锻炼，您有什么建议吗？',
    ],
  },
  {
    id: 'hobby',
    title: '兴趣爱好',
    icon: 'palette',
    color: '#FF9800',
    examples: [
      '您喜欢什么类型的音乐？有推荐的歌曲吗？',
      '最近有看什么好看的电视节目吗？',
      '您平时有什么特别的爱好？能跟我分享一下吗？',
    ],
  },
  {
    id: 'family',
    title: '家庭话题',
    icon: 'home-heart',
    color: '#2196F3',
    examples: [
      '您的孙子孙女最近有什么有趣的事情吗？',
      '家里的小花园种了什么新植物吗？',
      '周末有什么家庭聚会计划吗？我很想听听。',
    ],
  },
  {
    id: 'memory',
    title: '往事回忆',
    icon: 'book-open-page-variant',
    color: '#9C27B0',
    examples: [
      '您年轻时有什么难忘的经历可以分享吗？',
      '能告诉我您最喜欢的一段回忆吗？',
      '您以前工作的地方是什么样的？有什么趣事？',
    ],
  },
];

interface IceBreakerProps {
  onSelectMessage: (message: string) => void;
}

export function IceBreaker({ onSelectMessage }: IceBreakerProps) {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const tintColor = useThemeColor({}, 'tint');

  const handleSelectMessage = (message: string) => {
    onSelectMessage(message);
    setModalVisible(false);
    setSelectedCategory(null);
  };

  const renderCategories = () => {
    return ICEBREAKER_CATEGORIES.map((category) => (
      <TouchableOpacity
        key={category.id}
        style={[styles.categoryItem, { borderColor: category.color }]}
        onPress={() => setSelectedCategory(category.id)}
        activeOpacity={0.7}
      >
        <View style={[styles.iconContainer, { backgroundColor: category.color }]}>
          <MaterialCommunityIcons name={category.icon} size={24} color="white" />
        </View>
        <ThemedText style={styles.categoryTitle}>{category.title}</ThemedText>
      </TouchableOpacity>
    ));
  };

  const renderExamples = () => {
    if (!selectedCategory) return null;

    const category = ICEBREAKER_CATEGORIES.find((c) => c.id === selectedCategory);
    if (!category) return null;

    return (
      <View style={styles.examplesContainer}>
        <View style={styles.examplesHeader}>
          <TouchableOpacity
            onPress={() => setSelectedCategory(null)}
            style={styles.backButton}
          >
            <MaterialCommunityIcons name="arrow-left" size={24} color={tintColor} />
          </TouchableOpacity>
          <ThemedText style={styles.examplesTitle}>{category.title}</ThemedText>
        </View>
        <ScrollView style={styles.examplesList}>
          {category.examples.map((example, index) => (
            <TouchableOpacity
              key={index}
              style={[styles.exampleItem, { borderLeftColor: category.color }]}
              onPress={() => handleSelectMessage(example)}
            >
              <ThemedText style={styles.exampleText}>{example}</ThemedText>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.fabButton, { backgroundColor: tintColor }]}
        onPress={() => setModalVisible(true)}
      >
        <MaterialCommunityIcons name="message-text-outline" size={28} color="white" />
      </TouchableOpacity>

      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
          <View style={styles.modalOverlay}>
            <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
              <ThemedView style={styles.modalContent}>
                <View style={styles.modalHeader}>
                  <ThemedText style={styles.modalTitle}>
                    {selectedCategory ? '选择一个话题' : '选择一个话题类别'}
                  </ThemedText>
                  <TouchableOpacity
                    onPress={() => {
                      setModalVisible(false);
                      setSelectedCategory(null);
                    }}
                  >
                    <MaterialCommunityIcons name="close" size={24} color={tintColor} />
                  </TouchableOpacity>
                </View>

                <View style={styles.modalBody}>
                  {selectedCategory ? renderExamples() : renderCategories()}
                </View>

                <View style={styles.modalFooter}>
                  <ThemedText style={styles.modalFooterText}>
                    选择一个话题，AI将帮您生成合适的聊天内容
                  </ThemedText>
                </View>
              </ThemedView>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 80,
    right: 20,
    zIndex: 1000,
  },
  fabButton: {
    width: 60,
    height: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    width: SCREEN_WIDTH * 0.9,
    maxHeight: '80%',
    borderRadius: 20,
    overflow: 'hidden',
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  modalBody: {
    padding: 15,
  },
  modalFooter: {
    padding: 15,
    borderTopWidth: 1,
    borderTopColor: '#E1E1E1',
    alignItems: 'center',
  },
  modalFooterText: {
    fontSize: 14,
    color: '#888',
    textAlign: 'center',
  },
  categoryItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    marginBottom: 10,
    borderRadius: 10,
    borderLeftWidth: 5,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  categoryTitle: {
    fontSize: 18,
    fontWeight: '600',
  },
  examplesContainer: {
    flex: 1,
  },
  examplesHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
  },
  backButton: {
    marginRight: 10,
  },
  examplesTitle: {
    fontSize: 18,
    fontWeight: '600',
  },
  examplesList: {
    maxHeight: 300,
  },
  exampleItem: {
    padding: 15,
    marginBottom: 10,
    borderRadius: 10,
    borderLeftWidth: 5,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
  },
  exampleText: {
    fontSize: 16,
    lineHeight: 22,
  },
});